<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Groonga dictionary search</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.min.css">
  </head>
  <body>
    <form name="search">
      <input type="search" size="60" maxlength="60" name="key" id="autoComplete">
      <input type="submit" value="Search">
    </form>
    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js">
    </script>
    <script type="text/javascript">
      const displayItems = (completions) => {
          const results = document.createElement("dl");
          console.log(completions);
          completions.forEach((item) => {
              const [key, gene95Desc, edictDesc] = item;
              
              const dt = document.createElement("dt");
              const dtSpan = document.createElement("span");
              dtSpan.append(document.createTextNode(key));
              dt.append(dtSpan)
              results.append(dt);

              const dd = document.createElement("dd");
              const ddSpanGene95 = document.createElement("span");
              ddSpanGene95.append(document.createTextNode(gene95Desc));
              dd.append(ddSpanGene95)
              const ddSpanEdict = document.createElement("span");
              ddSpanEdict.append(document.createTextNode(edictDesc));
              dd.append(ddSpanEdict)
              results.append(dd);
          });
          const result = document.getElementById("result");
          result.innerHTML = "";
          result.append(results);
      };

      const dataSource = async (query) => {
          const params = new URLSearchParams({
              query: query,
              types: "complete",
              table: "item_dictionary",
              column: "kana",
              limit: 25,
	      output_columns: "_key,gene95_desc,edict_desc",
	      frequency_threshold: 1,
	      prefix_search: "yes"
          });
          const source = await fetch(`/d/suggest?${params.toString()}`);
          const data = await source.json();
          const completions = data[1].complete.slice(2, -1);
          // Instant search
          displayItems(completions);
          return completions.map((item) => item[0]);
      };

      const autoCompleteJS = new autoComplete({
          placeHolder: "Word",
          data: {
              src: dataSource
          },
          // All records are already filtered by Groonga.
          searchEngine: (query, record) => record,
          events: {
              input: {
                  selection: (event) => {
                      const selection = event.detail.selection.value;
                      autoCompleteJS.input.value = selection;
                      dataSource(selection);
                  }
              }
          }
      });
    </script>
    <div id="result" style="margin-top: 7em;"></div>
  </body>
</html>
